<template>
	<div class="food">
		<!-- 面包屑 -->
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>美食管理</el-breadcrumb-item>
				<el-breadcrumb-item>菜品管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="food-a">
			<!--	搜索框	-->
			<div class="food-search">
				<el-form ref="form" :inline="true" :model="searchForm" label-width="80px" size="medium">
					<el-form-item label="菜品分类">
						<el-select v-model="searchForm.food_kind_id" placeholder="请选择菜品分类">
							<el-option v-for="i in foodKinds" :label="i.food_kind_name" :value="i.food_kind_id" :key="i.food_kind_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="菜品名称">
						<el-input v-model="searchForm.food_name"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 一堆按钮 新增 删除 -->
			<div class="food-buttons">
				<div>
					<el-button type="primary" size="medium" @click="addFood"><i class="el-icon-plus"></i> 增加</el-button>
				</div>
				<div>
					<el-button type="danger" size="medium" :disabled="delButton" @click="delSelect"><i class="el-icon-delete"></i> 批量删除</el-button>
				</div>
			</div>
			<!-- 菜品表格 -->
			<div class="food-table">
				<el-table
					:data="tableData"
					style="width: 100%"
					@selection-change="searchChange">
					<el-table-column
						type="selection"
						width="55px"
						align="center"
						fixed="left">
					</el-table-column>
					<el-table-column
						prop="food_id"
						label="菜品id"
						sortable
						fixed="left">
					</el-table-column>
					<el-table-column
						prop="food_name"
						label="菜品名称">
					</el-table-column>
					<el-table-column
						prop="food_price"
						label="单价"
						sortable>
					</el-table-column>
					<el-table-column
						prop="food_remain_number"
						label="剩余数量"
						sortable>
					</el-table-column>
					<el-table-column
						prop="good_frequency"
						label="好评率"
						sortable>
					</el-table-column>
					<el-table-column
						prop="food_weight"
						label="重量"
						sortable>
					</el-table-column>
					<el-table-column
						prop="food_time"
						label="上架时间"
						sortable>
					</el-table-column>
					<el-table-column
						prop="food_depiction"
						label="描述"
						:show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column
						prop="food_discount"
						label="折扣"
						sortable>
					</el-table-column>
					<el-table-column
						prop="food_img"
						label="照片"
						align="center">
						<template slot-scope="scope">
							<img :src="`http://localhost:8080/res/${scope.row.food_img}`" height="40px"width="40px"/>
						</template>
					</el-table-column>
					<el-table-column
						prop="food_kind_id"
						label="分类id"
						sortable>
					</el-table-column>
					<el-table-column
						fixed="right"
						label="操作"
						width="130px"
						align="center">
						<template slot-scope="scope">
							<el-button @click="editClick(scope.row)" type="text" ><i class="el-icon-edit"></i> 编辑</el-button>
							<el-button @click="delClick(scope.row)" type="text" ><i class="el-icon-delete"></i> 删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="food-page">
				<el-pagination
					background
					layout="total, sizes, prev, pager, next, jumper"
					:page-sizes="[5,10,15,20]"
					:current-page="pageNum"
					:total="total"
					:page-size="pageSize"
					@size-change="handleSizeChange"
					@current-change="currentChange">
				</el-pagination>
			</div>
			<!-- 增加弹出窗 -->
			<div class="food-dialog" >
				<el-dialog
					title="增加菜品"
					:visible.sync="addDialogVisible"
					width="600px"
					top="6vh"
				>
					<div class="food-dialog-from"><!-- 中间内容 -->
						<el-form :model="addForm" label-width="80px" size="small">
							<el-row>
								<el-col :span="11">
									<el-form-item label="菜品名称" prop="food_name">
										<el-input v-model="addForm.food_name"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="菜品分类" prop="food_kind_id">
										<el-select v-model="addForm.food_kind_id " placeholder="请选择菜品分类">
											<el-option v-for="i in foodKinds" :label="i.food_kind_name" :value="i.food_kind_id" :key="i.food_kind_id"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="单价" prop="food_price">
										<el-input v-model="addForm.food_price"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="剩余数量" prop="food_remain_number">
										<el-input v-model="addForm.food_remain_number"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="重量" prop="food_weight">
										<el-input v-model="addForm.food_weight"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="上架时间" prop="food_time">
										<el-date-picker type="date" placeholder="选择日期" v-model="addForm.food_time" style="width: 100%;"></el-date-picker>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="好评率" prop="good_frequency">
										<el-input v-model="addForm.good_frequency"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="折扣" prop="food_discount">
										<el-input v-model="addForm.food_discount"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item label="描述" prop="food_depiction">
								<el-input type="textarea" v-model="addForm.food_depiction"></el-input>
							</el-form-item>
							<el-form-item label="菜品图片">
								<el-upload ref="addUpload" action="" list-type="picture-card" :limit="1" :class="{hide:addHideUpload}" :on-change="addChangeImg"
								           :on-remove="addHandleRemove" :auto-upload="false" :file-list="addFileList" :multiple="false">
									<i class="el-icon-plus"></i>
								</el-upload>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addSubmit(addForm)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
			<!-- 编辑弹出窗 -->
			<div class="food-dialog">
				<el-dialog
					title="编辑菜品"
					:visible.sync="editDialogVisible"
					width="600px"
					top="6vh">
					<div class="food-dialog-from"><!-- 中间内容 -->
						<el-form :model="editForm" label-width="80px" size="small">
							<el-row>
								<el-col :span="11">
									<el-form-item label="菜品名称" prop="food_name">
										<el-input v-model="editForm.food_name"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="菜品分类" prop="food_kind_id">
										<el-select v-model="editForm.food_kind_id " placeholder="请选择菜品分类">
											<el-option v-for="i in foodKinds" :label="i.food_kind_name" :value="i.food_kind_id" :key="i.food_kind_id"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="单价" prop="food_price">
										<el-input v-model="editForm.food_price"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="剩余数量" prop="food_remain_number">
										<el-input v-model="editForm.food_remain_number"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="重量" prop="food_weight">
										<el-input v-model="editForm.food_weight"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="上架时间" prop="food_time">
										<el-date-picker type="date" placeholder="选择日期" v-model="editForm.food_time" style="width: 100%;"></el-date-picker>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="好评率" prop="good_frequency">
										<el-input v-model="editForm.good_frequency"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="折扣" prop="food_discount">
										<el-input v-model="editForm.food_discount"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item label="描述" prop="food_depiction">
								<el-input type="textarea" v-model="editForm.food_depiction"></el-input>
							</el-form-item>
							<el-form-item label="菜品图片">
								<el-upload ref="editUpload" action="" list-type="picture-card" :limit="1" :class="{hide:editHideUpload}" :on-change="editChangeImg"
								           :on-remove="editHandleRemove" :auto-upload="false" :file-list="editFileList" :multiple="false">
<!--									<i class="el-icon-plus"></i>-->
									<img :src="`http://localhost:8080/res/${editForm.food_img}`" height="146px" width="146px" style="opacity:0.5;"/>
								</el-upload>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editSubmit(editForm)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import FoodService from "@/views/Food/FoodService";
  export default {
    name: "Food",
	  data(){
      return {
        searchForm: {
          food_kind_id: null,
          food_name: ''
        },
        addForm: {
          food_img:''
        },
        editForm: {
          food_img:''
        },
        addFileList: [],
        editFileList: [],
        tableData: [],
        foodKinds: [],
        total: 100,
        pageNum: 1,
        pageSize: 5,
        addDialogVisible: false,
        editDialogVisible: false,
        addHideUpload: false,
        editHideUpload: false,
        delButton: true,
				tableSelect:[]

      }
	  },
	  methods:{
      //提交搜索表单
      searchSubmit(){
        this.pageNum=1;
				this.searchFood();
		  },
		  //批量删除
      delSelect(){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
					//console.log(this.tableSelect);
          let list = this.tableSelect.map(item=>{
            return item.food_id;
          })
          FoodService.delFoodService({
		          delete_list: list
	          },r=>{
              this.$message({
                type: 'success',
                message: `删除${r.deletenum}条数据`
              });
            this.searchFood();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
		  //增加
		  addFood(){
				this.addDialogVisible=true;
		  },
		  //编辑
      editClick(row){
				this.editDialogVisible=true;
				//console.log(row);
				this.editForm=row;

      },
		  //单删
      delClick(row){
        //console.log(row);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          FoodService.delFoodService({
            delete_list:[row.food_id]
          },r=>{
            if(r.deletenum==1){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
            this.searchFood();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
		  //页面跳转
      currentChange(val){
        this.pageNum=val;
	      this.searchFood();
      },
		  //页面大小改变
      handleSizeChange(val){
        this.pageSize=val;
        this.pageNum=1;
        this.searchFood();
      },
			//提交添加表单
		  addSubmit(addForm){
        this.addDialogVisible = false;
        //addForm.food_time=addForm.food_time.toString().substring(0,10);
        this.addFileList = this.$refs.addUpload.uploadFiles;
        this.upload(this.addFileList,res=>{
          addForm.food_img=res;
          FoodService.addFoodService(
            addForm
            ,r=>{
              if(r.insertnum==1){
                this.$message({
                  type: 'success',
                  message: '提交成功!'
                });
              }else{
                this.$message({
                  type: 'error',
                  message: '提交失败!'
                });
              }
              this.searchFood();
            });
        })
		  },
      editSubmit(editForm){
        this.editDialogVisible = false;
        //editForm.food_time=editForm.food_time.toString().substring(0,10);
        this.editFileList = this.$refs.editUpload.uploadFiles;
        this.upload(this.editFileList,res=>{
          if(res!=''){
            editForm.food_img=res;
          }
          FoodService.editFoodService(
            editForm
            ,r=>{
              if(r.updatenum==1){
                this.$message({
                  type: 'success',
                  message: '提交成功!'
                });
              }else{
                this.$message({
                  type: 'error',
                  message: '提交失败!'
                });
              }
              this.searchFood();
            })
        })
      },
			//图片改变回调
      addChangeImg(file,fileList){
        this.addHideUpload = fileList.length >= 1;

      },
      //图片删除回调
      addHandleRemove(file,fileList){
        this.addHideUpload = fileList.length >= 1;

      },
      //图片改变回调
      editChangeImg(file,fileList){
        this.editHideUpload = fileList.length >= 1;

      },
      //图片删除回调
      editHandleRemove(file,fileList){
        this.editHideUpload = fileList.length >= 1;

      },
		  //表格选择改变回调
      searchChange(select){
				//console.log(select);
	      this.tableSelect = select;
        this.delButton = select.length == 0;
      },
		  //搜索方法
		  searchFood(){
        console.log(`搜索ing：名称：${this.searchForm.food_name}分类：${this.searchForm.food_kind_id}当前页：${this.pageNum}页大小：${this.pageSize}`)
				FoodService.searchFoodService({
					food_name:this.searchForm.food_name,
					food_kind_id:this.searchForm.food_kind_id,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
				},r=>{
          this.tableData = r.foodList.list;
          this.total = r.foodList.total;
				})
		  },
		  //上传图片
		  upload(fileList,callback){
        let formData = new FormData();
        let result = fileList.map(obj => {
          return obj.raw
        });
        result.forEach(function(file) {
          formData.append('mpfs', file, file.name);
        })
			  if(formData.has('mpfs')){
          FoodService.uploadService(formData, r => {
            //console.log(r.picName);
            callback(r.picName);
          });
			  }else{
			    callback('');
			  }
		  }

	  },
	  created(){
			FoodService.categoryService({

			},r=>{
			  this.foodKinds=r.foodkindList;
			});
      this.searchForm.food_name='';
      this.searchForm.food_kind_id=null;
      this.pageNum=1;
      this.pageSize=5;
      this.searchFood();
	  }
  }
</script>

<style scoped lang="less">

	@import '../../style/Common.less';
	.food-a{
		padding: 20px;
	}
	.food-search{
		color: #606266;
		font-weight:bold;
	}
	.food-buttons{
		display: flex;
		> div{
			margin: 0 12px 20px 12px;
		}
	}
	.food-table{

	}
	.food-page{
		height: 32px;
		margin: 20px 20px 20px 0;
		float: right;
	}
	.food-dialog{
		.food-dialog-from{
			padding: 0 20px;
		}
	}

	.hide .el-upload--picture-card {
		display: none;
	}
</style>